<template>
    <el-dialog v-model="dialogVisible1" class="my-dialog" style="min-width: 60%;">
        <el-descriptions border :column="1" size="small" class="my-description">
            <el-descriptions-item label-align="center" v-for="(item, index) in labelList" :key="index">
              <template #label>
                <p class="my-label">{{ item.label }}</p>
              </template>
              <div v-if="item.prop == 'video'" class="flexLeftCenter">
                <div class="video-placeholder flexCenter" v-for="(it, idx) in detailsData.video" :key="idx">
                  <video :src="it.url" id="myvideo" controls ref="myvideo"></video>
                </div>
              </div>
              <span v-else>{{ item.prop.indexOf('.') != -1 ?
                detailsData[item.prop.split('.')[0]]?.[item.prop.split('.')[1]] : detailsData[item.prop] }}</span>
            </el-descriptions-item>
          </el-descriptions>
    </el-dialog>
    <!-- 视频预览 -->
    <!-- <el-dialog v-model="previewVideo" class="video-preview" @close="closePreview">
      <video :src="videoUrl" id="myvideo" controls ref="myvideo"></video>
    </el-dialog> -->
  </template>
  <script setup>
  import { ref, watchEffect, nextTick } from 'vue'
  import { ElMessage } from 'element-plus';
  
  const activeName = ref('details')
  const dialogVisible1 = ref(false)
  
  const myvideo = ref(null);
  
  const detailsData = ref({});
  const labelList = ref([
    { label: '编号', prop: 'id' },
    { label: '通知名称', prop: 'title' },
    { label: '触发节点', prop: 'trigger_node_label' },
    { label: '通知内容', prop: 'content' },
    { label: '生效时间', prop: 'effect_type_label' },
    { label: '指定国家', prop: 'country_code_label' },
    { label: '状态', prop: 'status_label' },
    { label: '创建时间', prop: 'create_time' }
  ]);
  
  const tableData = ref([])
  
  
  // methods
  const handleClick = async (tab) => {
    if (tab.paneName === activeName.value) {
      return;
    }
    activeName.value = tab.paneName;
  }
  
  defineExpose({
    dialogVisible1,
    detailsData
  })
  
  watchEffect(() => {
    if (dialogVisible1.value == false) {
      nextTick(() => {
        tableData.value = [];
      })
    }
  })
  

  </script>
  <style lang="less" scoped>
  :deep(.el-dialog__body) {
    padding-top: 0 !important;
  }
  
  .my-description {
    width: calc(100% - var(--el-dialog-padding-primary));
  }
  
  .my-label {
    width: 100px;
  }
  
  .copy-icon {
    transform: translateY(3px);
    cursor: pointer;
  }
  
  // .video-placeholder {
  //   width: 100px;
  //   height: 100px;
  //   background: #f3f3f3;
  //   margin-right: 10px;
  //   font-size: 50px;
  //   cursor: pointer;
  // }
  #myvideo{
    width: 450px;
    height: 350px;
  }
  </style>